<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据可视化Echarts</title>
	<link rel="stylesheet" href="./css/myindex.css">
</head>

<body>
	<!-- 头部 -->
	<header>
		<h1>数据可视化-Echarts</h1>
		<div class="showTime"></div>
	</header>
	<!-- 主体模块 -->
	<div class="mainbox">
		<!-- 左 -->
		<div class="column">
			<div class="panel bar">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>
			<div class="panel line">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>
			<div class="panel pie">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>


		</div>
		<!-- 中 -->
		<div class="column">
			<!-- 数字 -->
			<div class="no">
				<div class="no-hd">
					<ul>
						<li>125811</li>
						<li>100000</li>
					</ul>
				</div>
				<div class="no-bd">
					<ul>
						<li>前端需求人数</li>
						<li>市场供应人数</li>
					</ul>
				</div>
			</div>
			<!-- 地图模块 -->
			<div class="map">
				<div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
			</div>
		</div>
		<!-- 右 -->
		<div class="column">
			<div class="panel">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>
			<div class="panel">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>
			<div class="panel">
				<h2>柱形图</h2>
				<div class="chart">

				</div>
				<div class="panel-footer"> </div>
			</div>


		</div>
	</div>
	<script>
		var t = null;
		t = setTimeout(time, 1000);//開始运行
		function time() {
			clearTimeout(t);//清除定时器
			dt = new Date();
			var y = dt.getFullYear();
			var mt = dt.getMonth() + 1;
			var day = dt.getDate();
			var h = dt.getHours();//获取时
			var m = dt.getMinutes();//获取分
			var s = dt.getSeconds();//获取秒
			document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
			t = setTimeout(time, 1000); //设定定时器，循环运行     
		}
	</script>
	<script src="./js/flexible.js"></script>
	<script src="./js/echarts.min.js"></script>
	<script src="./js/myindex.js"></script>
</body>

</html>